import { type GreenCreditParams } from '../apis';
import { type FilterMenuProps, ComponentType, type IResult } from 'vc/src/web';
import { getOrganizationType, getIndicators, getTagYear, getCurrency } from '../apis';

export function useScreen() {
  const queryData = reactive<GreenCreditParams>({
    pageNum: 1,
    pageSize: 15,
    indicatorFiled: '',
    indicatorOrder: 'desc',
    dimensionCode: 7,
    organizationType: '',
    indicatorCodes: '',
    statisticalPeriod: '',
    currencyType: ''
  });

  const organizationTypeChanged = ref(false);
  const menus = ref<Array<FilterMenuProps>>([
    {
      ...getOrganizationTypeConfig(),
      submitFn: (val: string, changed: any) => {
        organizationTypeChanged.value = changed && queryData.organizationType === '';
        queryData.organizationType = val;
      }
    },
    {
      ...getIndicatorsConfig(),
      submitFn: (val: IResult) => {
        const { lv2 } = val;
        queryData.indicatorCodes = lv2.join();
      }
    },
    {
      ...getTagYearConfig(queryData),
      submitFn: (val: string) => {
        queryData.statisticalPeriod = val;
      }
    },
    {
      ...getCurrencyConfig(queryData),
      submitFn: (val: string) => {
        queryData.currencyType = val;
      }
    }
  ]);

  const traceSource = ref(false);

  return {
    queryData,
    organizationTypeChanged,
    menus,
    traceSource
  };
}

function getOrganizationTypeConfig() {
  const { data } = useRequest(getOrganizationType);
  const options = computed(() => data.value || []);

  return {
    title: '机构类型',
    component: ComponentType.MULTIPLE,
    options,
    noLimit: true,
    submitFn: () => {}
  };
}

function getIndicatorsConfig() {
  const { data } = useRequest(getIndicators);
  const options = computed(() => data.value || []);

  return {
    title: '指标',
    component: ComponentType.CASCADER,
    options,
    submitFn: () => {}
  };
}

function getTagYearConfig(queryData: GreenCreditParams) {
  const { data } = useRequest(getTagYear(7));
  const options = computed(() => {
    if (data.value) {
      queryData.statisticalPeriod = data.value[0].year + '';
      return data.value.map((o) => {
        return { name: o.year + '年', code: o.year + '' };
      });
    } else {
      return [];
    }
  });
  const value = computed(() => {
    return options.value.length ? queryData.statisticalPeriod : '';
  });

  return {
    title: '年度',
    component: ComponentType.SINGLE,
    required: true,
    options,
    value,
    submitFn: () => {}
  };
}

function getCurrencyConfig(queryData: GreenCreditParams) {
  const { data } = useRequest(getCurrency);
  const options = computed(() => {
    if (data.value) {
      queryData.currencyType = data.value[0].code;
      return data.value;
    } else {
      return [];
    }
  });
  const value = computed(() => {
    return options.value.length ? queryData.currencyType : '';
  });

  return {
    title: '币种',
    component: ComponentType.SINGLE,
    options,
    value,
    submitFn: () => {}
  };
}
